<template>
<!--    <h3>Video Demo (Do not copy element ID)</h3>-->
    <div class="layout-col">
        <div class="layout">

            <div id="video-container" ref="videoContainer">
                <div class="thisVideo">
                    <video id="videoBox" ref="videoBox" playsinline class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"></video>
                </div>

<!--                <div class="videoGroup">-->
<!--                    <div class="btnGroup" v-for="(group,index) in cameraGroups" :key="index" :id="'group-' + index">{{group.groupName}}</div>-->
<!--                </div>-->
            </div>
<!--            <div id="我占领一列"></div>-->
<!--            <div id="我也占领一列"></div>-->
        </div>
<!--        <div id="我占领一行"></div>-->
    </div>
</template>

<script>
import "video.js/dist/video-js.css"
import videojs  from "video.js"
import "videojs-contrib-hls.js"
import request from "../../../utils/request.js";
import { getMediaUrl, selectByGroupAndArea } from "../../../api/video";
export default {
    name: "HlsVideo",
    props:{
      area:{
        type:String,
        default:''
      }
    },
    data() {
        return {
            currentDeviceCode: '', //当前视频设备code
            cameraGroups: [],  //视频设备组
            currentGroup: null //当前正在播放的视频组
        }
    },
    mounted() {
        this.init('')
    },
    watch:{
        area(val){
          if (val!==''){
            this.play(val)
          }
        }
      },
    methods: {
        init(val) {
            let me = this;
            me.initPlayer(); //准备播放器
            me.play('41162301021322000005')

            // ////////////////////////////////
            // // 加载视频列表，这里加载的视频设备的分类以及分类下面视频设备的deviceCode，播放时需要根据deviceCode获取地址
            // ////////////////////////////////

       /*   selectByGroupAndArea({areaCode: val}).then((resp) => {
              me.cameraGroups = resp.data.data
                //播放第一个视频
                // me.currentGroup = me.cameraGroups[0]; //当前视频组
                // me.currentDeviceCode = me.currentGroup[0].deviceCode //当前视频组中的第一个视频
              me.currentDeviceCode=me.cameraGroups[0].deviceCode
              ////////////////////播放/////////////////////////
              me.play(me.currentDeviceCode)

            })*/

        },
        //初始化播放器
        initPlayer() {
            let me = this;
            this.videoPlayer = videojs(me.$refs.videoBox,{
                liveui: true,
                fluid: true, // 扩展以适应其容器的大小
                bigPlayButton: true, // 是否在暂停时显示大的播放按钮，按钮一般默认在左上角
                textTrackDisplay: true,
                posterImage: false, // 是否使用视频的缩略图
                errorDisplay: false,
                controls: true,
                autoplay: true,
                muted: true, //如果为false,视频不会自动播放，这是为了避免噪声扰民
                html5: {
                    hlsjsConfig: {
                        debug: false
                    }
                }
            }, function (){
                console.log('视频播放器已就绪');
            })
        },
        ////////////////////////////////////////////////
        // 根据deviceCode播放视频，每次播放视频都需要重新加载视频播放地址
        ///////////////////////////////////////////////
        play(deviceCode) {
            if (!this.videoPlayer) {
                log.error('播放器未就绪')
                return;
            }
            let me = this;
            ///////////////////////////////
            //获取视频地址并播放
            ///////////////////////////////
            // request.get('/api/camera/getMediaUrl', {params: {}})
          getMediaUrl({deviceCode: deviceCode})
            .then((resp) => {
                let url = me.covertURL(resp.data.data.url)
                //播放视频
                me.videoPlayer.src({
                    src: url,
                    type: 'application/x-mpegURL'
                })
                me.videoPlayer.play()
            })
        },

        covertURL(originUrl) {
            //本地测试，需要代理，否则会跨域
            if (location.host.indexOf('localhost') >= 0
                || location.host.indexOf('127.0.0.1')  >= 0
                || location.host.indexOf('192.168') >= 0) {
                let domain = 'https://liveplay.hefei.vcn.ctyunxs.cn'
                if (originUrl.startsWith(domain)) {
                    return  'http://localhost/' + originUrl.substring(domain.length + 1)
                }
            }
            return originUrl;
        }
    }
}
</script>

<style scoped>
h3 {
    color: #fff;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#video-container {
    /*border: 1px solid #409eff;*/
    flex: 2;
    flex-direction: row;
}

#video-container .thisVideo {
    flex: 3;
}
#video-container .thisVideo video {
    width: 100%;
    height: 100%;
}


#video-container .videoGroup {
    flex: 1;
}


.layout-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.layout-col >div {
    display: flex;
    flex: 1;
}

.layout {
    flex: 1 !important;
    display: flex;
    flex-direction: row;
}

.layout >div {
    display: flex;
    flex: 1;
}
.videoGroup {
    padding: 20px;
}

.videoGroup .btnGroup {
    cursor: pointer;
    color: #1ACFFF;
    background-color: #1e89d3;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin: 10px;
}
.videoGroup .btnGroup:hover {
    background-color: #68bdf8;
    color: #b5e9f7;
}
</style>
